const oRegBtn = $('.reg-btn');
const oLogBtn = $('.login-btn');
const oRegCon = $('.reg-content');
const oLogCon = $('.login-content');

const oSpanUser = $('.phoneVer');
const oSpanPass = $('.secretVer');
const oSpanUserLog = $('.phoneLog');
const oSpanPassLog = $('.secretLog');

const oRegUser = $('.username1');
const oRegPass = $('.password1');
const oLogUser = $('.username');
const oLogPass = $('.password');

const oBtn1 = $('.btn1');
const oBtn2 = $('.btn2');

const oSliderVerify = $('.slider-verify');

// 注册正则验证
let isUser = false;
let isPass = false;
// 用户名
oRegUser.on('input', function () {  
    let username = oRegUser.val();
    if (username == '') {
        oSpanUser.html('用户名不为空！');
        oSpanUser.css('color', 'red');
        isUser = false;
        return;
    }
    if (username.length != 11) {
        oSpanUser.html('手机号长度必须为11位！');
        oSpanUser.css('color', 'red');
        isUser = false;
        return;
    }
    if (/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(username)) {
        oSpanUser.html('验证通过！');
        oSpanUser.css('color', 'green');
        isUser = true;
        
    } else {
        oSpanUser.html('手机号格式不正确！');
        oSpanUser.css('color', 'red');
        isUser = false;
    }
    if(isUser && isPass){
        // oBtn1.disabled = false;
        oBtn1.removeAttr('disabled', 'disabled');
        oBtn1.css('opacity' , '1')
    }else{
        // oBtn1.disabled = true;
        // oBtn1.css('disable', 'true');
        oBtn1.attr('disabled', 'disabled');
        oBtn1.css('opacity' , '0.4')
    }
})


// 密码验证
oRegPass.on('input', function () {  
    let password = oRegPass.val();
    if (/^.{0}$/.test(password)) {
        oSpanPass.html('密码不为空！');
        oSpanPass.css('color', 'red');
        isPass = false;
    } else {
        // 判断强弱
        let flag1 = 0,flag2 = 0, flag3 = 0;
        if(/\d/.test(password)){
            flag1 = 1;
        }
        if(/[a-z]/.test(password)){
            flag2 = 1;
        }
        if(/[A-Z]/.test(password)){
            flag3 = 1;
        }

        let flag = flag1 + flag2 + flag3;
        if(flag === 3){
            oSpanPass.html('强');
            oSpanPass.css('color', 'green');
        }else if(flag === 2){
            oSpanPass.html('中');
            oSpanPass.css('color', 'orange');
        }else{
            oSpanPass.html('弱');
            oSpanPass.css('color', '#CBCB41');
        }
        isPass = true;
    }
    if(isUser && isPass){
        // oBtn1.disabled = false;
        oBtn1.removeAttr('disabled', 'disabled');
        oBtn1.css('opacity', '1');
    }else{
        // oBtn1.disabled = true;
        oBtn1.attr('disabled', 'disabled');
        oBtn1.css('opacity', '0.4');
    }
})

// 点击


// 点击对应的切换登陆注册页面
oRegBtn.on('click', function () {
    // 登录左移 注册右移
    oLogCon.animate({ left: "-450px" ,opacity:"0"})
    oRegCon.animate({ left: "0", opacity: "1" });
    // 透明度变化
    // 按钮样式变化
    oLogBtn.removeClass('line-show');
    oRegBtn.addClass('line-show');

    oLogUser.val('');
    oLogPass.val('');
    oSpanUserLog.html('');
    oSpanPassLog.html('');
})

oLogBtn.on('click', function () {
    // 登录右移 注册左移
    oLogCon.animate({ left: "40px" ,opacity:"1"})
    oRegCon.animate({ left: "450px", opacity: "0" });
    
    oLogBtn.addClass('line-show');
    oRegBtn.removeClass('line-show');

    oRegUser.val('');
    oRegPass.val('');
    oSpanUser.html('');
    oSpanPass.html('');
})




// 登录
let isUserLog = false;
let isPassLog = false;
oLogUser.on('input', function () {  
    let username = oLogUser.val();
    if (username == '') {
        oSpanUserLog.html('用户名不为空！');
        oSpanUserLog.css('color', 'red');
        isUserLog = false;
        return;
    }
    if (username.length != 11) {
        oSpanUserLog.html('手机号长度必须为11位！');
        oSpanUserLog.css('color', 'red');
        isUserLog = false;
        return;
    }
    if (/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(username)) {
        oSpanUserLog.html('验证通过！');
        oSpanUserLog.css('color', 'green');
        isUserLog = true;
        
    } else {
        oSpanUserLog.html('手机号格式不正确！');
        oSpanUserLog.css('color', 'red');
        isUserLog = false;
    }
    if(isUserLog && isPassLog){
        // oBtn2.disabled = false;
        // oBtn2.css('disable',false);
        oBtn2.removeAttr('disabled', 'disabled');
        oBtn2.css('opacity' , '1')
    }else{
        // oBtn2.disabled = true;
        // oBtn2.css('disable',true);
        oBtn2.attr('disabled', 'disabled');
        oBtn2.css('opacity' , '0.4')
    }
})


// 密码验证
oLogPass.on('input', function () {  
    let password = oLogPass.val();
    if (/^.{0}$/.test(password)) {
        oSpanPassLog.html('密码不为空！');
        oSpanPassLog.css('color', 'red');
        isPassLog = false;
    } else {
        // 判断强弱
        let flag1 = 0,flag2 = 0, flag3 = 0;
        if(/\d/.test(password)){
            flag1 = 1;
        }
        if(/[a-z]/.test(password)){
            flag2 = 1;
        }
        if(/[A-Z]/.test(password)){
            flag3 = 1;
        }

        let flag = flag1 + flag2 + flag3;
        if(flag === 3){
            oSpanPassLog.html('强');
            oSpanPassLog.css('color', 'green');
        }else if(flag === 2){
            oSpanPassLog.html('中');
            oSpanPassLog.css('color', 'orange');
        }else{
            oSpanPassLog.html('弱');
            oSpanPassLog.css('color', '#CBCB41');
        }
        isPassLog = true;
    }
    if(isUserLog && isPassLog){
        // oBtn2.disabled = false;
        // oBtn2.css("disable",'false');
        oBtn2.removeAttr('disabled', 'disabled');
        oBtn2.css('opacity', '1');
    }else{
        // oBtn2.disabled = true;
        // oBtn2.css("disable",'true');
        oBtn2.attr('disabled', 'disabled');
        oBtn2.css('opacity', '0.4');
    }
})



// 注册验证
oBtn1.on('click', function () {  
    let username = oRegUser.val();
    let password = oRegPass.val();
    
        
    // 注册
    reg({
        username,
        password
    }).then(res => {
        const { status, msg } = res;
        console.log(status , msg);
        if (status) {
            // 滑块验证
            
            oSliderVerify.css('display', 'block');
            new slider('.box');
            oLogCon.animate({ left: "40px" ,opacity:"1"})
            oRegCon.animate({ left: "450px", opacity: "0" });
            
            oLogBtn.addClass('line-show');
            oRegBtn.removeClass('line-show');
           
           
           
        } else {
            alert(msg);
        }
        
    })
    oRegUser.val('');
    oRegPass.val('');
    oSpanUser.html('');
    oSpanPass.html('');
})

// 登录验证
oBtn2.on('click', function () {  
    let username = oLogUser.val();
    let password = oLogPass.val();
    // 整个函数异步
    async function Login() {  
        //await请求数据，等待数据请求成功之后再进行后续操作
        let res = await Ajax('post', '../php/apiDoc/login.php', {
            username,
            password
        });
        // 得到数据
        console.log(res);
        const { status, msg } = res;
        if (status) {
            // 记录是谁在登录
            localStorage.setItem('LOGIN_USER', username);
            
            // const historyURL = location.search.replace('?HISTORY=', '')
            // if (historyURL) {
            //   //在别的页面操作，但是没有登录，所以跳转到登陆页面，登录完成之后则需要返回上次的页面
            //   location.href = historyURL
            // } else {
            //   //第一次登录，进入商品列表
            //   location.href = './goods_list.html'
            // }
            alert(msg);
            location.href = '../html/main.html';
        } else {
            alert(msg);
            // 
            if (msg !== '密码错误')
            {
                console.log(1);
                oLogCon.animate({ left: "-450px" ,opacity:"0"})
                oRegCon.animate({ left: "0", opacity: "1" });
            // 透明度变化
            // 按钮样式变化
                oLogBtn.removeClass('line-show');
                oRegBtn.addClass('line-show');
            }
             
             
            oBtn2.css('opacity', '0.4');
        }
    }

    Login();
    oLogUser.val('');
    oLogPass.val('');
    oSpanUserLog.html('');
    oSpanPassLog.html('');
})

// 滑块验证
class slider{
    constructor(ele){
        this.oBox = $(ele);
        this.oSlider = this.oBox.find('.slider');
        this.oFollow = this.oBox.find('.follow');
        this.oRandom = this.oBox.find('.random');
        this.oCover = this.oBox.find('.cover');
        this.oSpan = this.oCover.find('span');

        //box的内边距-滑块的内边距加边框
        this.maxX = this.oBox.innerWidth() - this.oSlider.outerWidth(); 
        this.leftB = this.oBox.offset().left;
        this.followLeft;
        this.followTop;

        this.data1;
        this.data2;
        this.x;

        // 方法随机生成
        this.randomProduce();
        this.Rand();
        this.event();
        
    }
    randomProduce(){
        //每次调用的时候follow和random的left都置为0
        this.oSlider.css('left',0);
        // this.oFollow.style.left = 0 + 'px';
        this.oFollow.css('left',0);
        //背景图可变
        const bg = [
            '../../mi/img/1619488300850.jpeg',
            '../../mi/img/IMG20200121211742.jpg',
            '../../mi/img/IMG20200303181853.jpg'
        ]
        let index = this.Rand(0,bg.length);
        //box背景图随机
        // this.oBox.style.backgroundImage = `url(${bg[index]})`;
        this.oBox.css('background-image',`url(${bg[index]})`);
        //follow背景图随机
        // this.oFollow.style.backgroundImage = `url(${bg[index]})`;
        this.oFollow.css('background-image',`url(${bg[index]})`);
        //开始随机生成
        let top1 = this.Rand(0,this.oBox.innerWidth() - 2 * this.oRandom.outerHeight()) ;
        // this.oRandom.style.top = Rand(0,oBox.clientHeight - 2 * oRandom.offsetHeight) + 'px';
        this.oRandom.css('top',top1);
        this.followTop = this.oRandom.css('top');

        // this.followTop = parseInt(oRandom.style.top);
    
        let left1 =  this.Rand(this.oRandom.outerWidth(),this.oBox.innerWidth() - this.oRandom.outerWidth())
        // this.oRandom.style.left = Rand(oRandom.offsetWidth,oBox.clientWidth - oRandom.offsetWidth) + 'px';
        this.oRandom.css('left',left1);
        this.followLeft = this.oRandom.css('left');
        //follow与random一起动
        this.oFollow.css('top',this.followTop)
        // console.log(this.followLeft);
        // this.oFollow.style.top = followTop + 'px';
        //改变follow的背景图定位的位置,背景图先水平在垂直，且是random的left和top的负数  
        // this.oFollow.style.backgroundPosition = -followLeft +'px ' + -followTop + 'px';
        // this.oFollow.css('background-position-x',-this.followLeft);
        
        // this.oFollow.css('background-position-y',-this.followTop);
        this.oFollow.css('background-position',`-${this.followLeft} -${this.followTop}`)
    }
    // 随机数
    Rand(min,max) { 
        return parseInt(Math.random() * (max - min) + min);
    }
 //兼容获得ele对象的attr属性
    getCss(ele,attr) { 
        if(window.getComputedStyle){
            return parseFloat(getComputedStyle(ele)[attr]);
        }else{
            return parseFloat(ele.currentStyle(attr));
        }
    }

    
    event() {  
        
        this.oSlider.on('mousedown', e => {  
            e = e || event;
            let target = e.target || e.srcElement;
            let leftDis = e.offsetX;
        
        
            //设置日期
            this.data1 = new Date();
            //按下才可以跟随,并且很容易跟丢，当鼠标在box外的时候也可以移动，用document，只能在box里面才可以移动的话用oBox
            document.onmousemove = e => { 
                e = e || event;
                // let boLeft = getCss(oBox,'border-width');
                let boLeft = this.oBox.css('border-width');
                // 得到的有单位
                boLeft = parseInt(boLeft);
                //距离为鼠标到box左边-leftDis
                //e.clientX的e是document不是box
                //点击的地方到浏览器左边-leftDis-box到浏览器左边的距离
                this.x = e.clientX - leftDis - this.leftB - boLeft;

                if(this.x < 0) this.x = 0;
                if(this.x > this.maxX) this.x = this.maxX;
                
                this.oSlider.css('left',this.x);
                this.oFollow.css('left',this.x);
                // oSlider.style.left = x + 'px';
                // oFollow.style.left = x + 'px';
                //鼠标抬起，跟随成功之后当鼠标放下则不再跟随
                
            }

        //这里如果直接点一下松手，滑块会跟随鼠标，解决方法需要将这个函数放在move外面
        document.onmouseup = e => { 
                e = e || event;
                //清除跟随
                this.data2 = new Date();
                let gap = ((this.data2 - this.data1)/1000).toFixed(1);
                document.onmousemove = null;
                document.onmouseup = null;

                //验证是否正确
                //设置为全局变量
                // console.log(followLeft);
                //抬起时如果没动就return不执行下面，解决点击一下就弹出有错的bug
                if(this.oSlider.offset().left == 0) return;
                //当移动了才判断
                
                let follow = parseInt(this.followLeft)
                if(this.x >= follow * 1 -10 && this.x <= follow * 1 + 10 ){
                    this.oCover.css('opacity','1');
                    this.oFollow.css('opacity','0');
                    this.oRandom.css('opacity','0');
                    // oCover.style.opacity = '1';
                    // oFollow.style.opacity = '0';
                    // oRandom.style.opacity = '0';
                    this.oSpan.html(gap);
                    setTimeout(() => {
                        this.oBox.parent().css('display', 'none');
                    }, gap * 1000 +2000);
                    
                }else{
                    alert('验证失败');
                    //验证失败要重新验证，同时follow和random的left都置为0
                    // oSlider.style.left = 0 + 'px';
                    // oFollow.style.left = 0 + 'px';
                    this.randomProduce();
                }
            }
        })
    }
    
    
}
